<template>
  <div class="maintenance-log">
    <!-- 添加搜索卡片 -->
    <el-card class="card-container search-card">
      <div class="search-container">
        <el-input v-model="searchParams.logId" placeholder="请输入搜索的日志编号" clearable @clear="handleSearch"
          class="narrow-search-input"></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </el-card>

    <!-- 原有表格卡片容器 -->
    <el-card class="card-container table-card">
      <el-table :data="paginatedData" border style="width: 100%" class="custom-table rounded-table">
        <el-table-column prop="id" label="日志编号" width="120"></el-table-column>
        <el-table-column prop="log" label="维护日志" min-width="300"></el-table-column>
        <el-table-column prop="submissionTime" label="日志时间" width="180"></el-table-column>
        <el-table-column prop="userId" label="维修人员" width="150"></el-table-column>
      </el-table>
      <!-- 分页容器 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

// 响应式数据
const logData = ref([]);
const allLogData = ref([]); // 新增：存储所有日志数据用于搜索过滤
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const searchParams = ref({ logId: '' }); // 新增：搜索参数

// 分页数据计算
const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  return logData.value.slice(startIndex, startIndex + pageSize.value);
});

// 获取日志数据
const fetchLogData = async () => {
  try {
    const response = await request.get('/admin/getAllDailyMaintenance');
    if (response.code === 200) {
      allLogData.value = response.data; // 存储原始数据
      handleSearch(); // 触发搜索过滤
    } else {
      ElMessage.error('获取日志数据失败: ' + (response.msg || '未知错误'));
    }
  } catch (error) {
    ElMessage.error('请求失败，请检查网络连接');
    console.error('API请求错误:', error);
  }
};

// 新增：搜索处理方法
const handleSearch = () => {
  currentPage.value = 1; // 重置页码
  let filteredData = [...allLogData.value];

  // 精确匹配日志编号
  if (searchParams.value.logId) {
    const logId = searchParams.value.logId.trim();
    filteredData = filteredData.filter(item => item.id && item.id.toString() === logId);
  }

  logData.value = filteredData;
  total.value = filteredData.length;
};

// 分页事件处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置为第一页
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 组件挂载时获取数据
onMounted(() => {
  fetchLogData();
});
</script>

<style scoped>
.maintenance-log {
  padding: 20px;
}

/* 卡片容器样式 - 确保搜索卡片和表格卡片宽度一致 */
.card-container {
  width: 70%;
  margin: 0 auto 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 搜索卡片样式 */
.search-card {
  padding: 20px;
}

.table-card {
  padding: 20px;
}

/* 搜索容器样式 */
.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* 缩小搜索框宽度 */
.narrow-search-input {
  width: 45%;
  /* 缩小到原来的约一半 */
}

/* 表格容器样式 - 增加底部留白 */
.table-container {
  width: 100%;
  padding-bottom: 60px;
  /* 增加数据下方留白 */
}

/* 固定页码在页面底端左边 */
.fixed-pagination {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
}

.search-input {
  flex: 1;
  max-width: 300px;
}

.search-button {
  min-width: 80px;
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 20px;
  text-align: center;
  position: static;
  bottom: auto;
  left: auto;
  transform: none;
  background-color: transparent;
  padding: 0;
  box-shadow: none;
}

/* 表格基础样式 */
::v-deep .custom-table {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
}

/* 表头样式 */
::v-deep .custom-table .el-table__header-wrapper .el-table__header {
  background-color: #1890ff !important;
}

::v-deep .custom-table .el-table__header th {
  background-color: #1890ff !important;
  color: #fff !important;
  border-bottom: 2px solid white !important;
}

/* 表格行样式 */
::v-deep .el-table .el-table__row {
  transition: all 0.3s ease !important;
  height: auto !important;
}

/* 行悬浮效果 */
::v-deep .el-table .el-table__body tr:hover>td {
  background-color: #1890ff !important;
  color: #fff !important;
  font-size: 15px !important;
}

/* 表格圆角样式 */
::v-deep .rounded-table {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
}

/* 修复表格行高度问题 */
::v-deep .el-table__body-wrapper {
  overflow: visible !important;
}
</style>
export default {
name: 'MaintenanceLog'
methods: {
handleSearch() {
// 优化搜索逻辑，当日志编号为空时显示所有数据
if (!this.searchParams.logId || this.searchParams.logId.trim() === '') {
// 直接使用所有数据，保持分页逻辑
this.logData = [...this.allLogData];
this.total = this.logData.length;
this.handleCurrentChange(1); // 重置到第一页
} else {
// 执行精确匹配搜索
const searchValue = this.searchParams.logId.trim();
this.logData = this.allLogData.filter(item =>
item.logId.toString() === searchValue
);
this.total = this.logData.length;
this.handleCurrentChange(1); // 重置到第一页
}
},
}
}
